import createProps from '../../../js/createProps.js'
import { dispatchEvent } from '../../../js/events.js'
import { EVENT_MODAL_CLOSE } from '../../../js/constants.js'

class Overlay extends HTMLElement {
    constructor() {
        super()
        this.classList.add('u-overlay')
        // Init Properties
        this.modalId = 'id-modal'
        // Events
        this.boundOnClick = this.onClick.bind(this)
    }

    connectedCallback() {
        createProps(this, true)
        this.innerHTML = `<span></span>`
        this.bindEvent()
    }

    open() {
        this.classList.add('fadein')
    }

    close() {
        this.classList.remove('fadein')
    }

    onClick() {
        dispatchEvent({
            eventName: EVENT_MODAL_CLOSE,
            args: { id: this.modalId }
        })
    }

    bindEvent() {
        this.unbindEvent()
        this.addEventListener('click', this.boundOnClick)
    }

    unbindEvent() {
        this.removeEventListener('click', this.boundOnClick)
    }

    disconnectedCallback() {
        this.unbindEvent()
    }
}

customElements.get('u-overlay') || customElements.define('u-overlay', Overlay)

export default Overlay